<template>
  <!-- 这里是频道组件 -->
  <el-form-item label="频道">

    <!-- el-select这个组件有一个change事件：当用户的选项发生改变会触发这个事件，执行hChange回调 -->
    <!--
      :value="value"
      value 是el-select组件需要的value属性
      "value"： 是父组件中通过v-model传入的初
    -->
    <!-- <el-select placeholder="请选择频道" :value="value" @change="hChange"> -->
    <el-select placeholder="请选择频道" clearable  :value="channelId" @change="hChange">
      <!-- <el-option label="频道1" value="shanghai"></el-option> -->
      <el-option
      v-for="channel in channels"
      :key="channel.id"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
  </el-form-item>
</template>
<script>

// 获取数据，并显示
export default {
  name: 'MyChannel',
  props: ['channelId'],
  model: {
    prop: 'channelId' // 把v-model默念传入的value属性名改成channelId
  },
  created () {
    this.loadChannel()
  },
  data () {
    return {
      // channelId: '',
      channels: []
    }
  },
  methods: {
    async loadChannel () {
      try {
        const res = await this.$axios({
          url: '/mp/v1_0/channels',
          method: 'GET'
        })
        console.log(res)
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    },
    // val就是用户在select下选中的 频道的id
    hChange (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style>

</style>
